<template>
    <div class="targetTable">
        <el-table
            ref="table"
            v-loading="loading"
            :show-header="showHeader"
            :data="tableData"
            :header-cell-style="{
                background: 'rgb(245, 245, 245)',
                fontSize: '15px'
            }"
            :row-class-name="tableRowClassName"
            :height="tableHeight"
            :row-style="{ height: rowheight || '' }"
            element-loading-text="加载中"
            border
            stripe
            :style="{
                width: '100%',
                minHeight: minHeight,
                marginBottom: '10px'
            }"
            :empty-text="noDataShow"
            @selection-change="handleSelectionChange"
        >
            <!-- 空数据展示，可以不用 -->
            <template slot="empty">
                <!-- <img src="@/assets/kongshuju.png" alt="" style="width:50px;height:50px;" class="mt-20"> -->
                <p class="noCart">{{ noDataShow }}</p>
            </template>
            <!-- 是否有全选列 -->
            <el-table-column
                v-if="selection"
                :fixed="selectionFixed"
                :selectable="selectFn"
                align="center"
                width="55"
                type="selection"
            />
            <el-table-column
                label="序号"
                align="center"
                width="50"
                v-if="tableColumns && tableColumns.length"
            >
                <template slot-scope="scope">
                    <span>
                        {{ (page - 1) * rows + scope.$index + 1 }}
                    </span>
                </template>
            </el-table-column>
            <!-- prop是对应列内容的字段名 width是对应列宽度 sortable是是否排序 label是对应列名称 -->
            <el-table-column
                v-for="(item, index) in tableColumns"
                :key="index"
                :prop="item.param"
                :width="item.width ? item.width : ''"
                :label="item.label"
                :align="item.align || 'center'"
                :fixed="item.fixed"
                header-align="center"
            >
                <!-- 因为有些参数需要判定比如性别所以判断一下 -->
                <template slot-scope="scope">
                    <template v-if="!item.render">
                        <template v-if="item.formatter">
                            <span v-html="item.formatter(scope.row, item)" />
                        </template>
                        <template v-else>
                            <span>{{ scope.row[item.param] }}</span>
                        </template>
                    </template>
                    <template v-else>
                        <expand-dom
                            :column="item"
                            :row="scope.row"
                            :render="item.render"
                            :index="scope.$index"
                        />
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="total + ''">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                :page-size="rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    components: {
        expandDom: {
            functional: true,
            props: {
                row: Object,
                render: Function,
                index: Number,
                column: {
                    type: Object,
                    default: null
                }
            },
            render: (h, ctx) => {
                const params = {
                    row: ctx.props.row,
                    index: ctx.props.index
                };
                if (ctx.props.column) params.column = ctx.props.column;
                return ctx.props.render(h, params);
            }
        }
    },
    props: {
        showHeader: {
            // 是否显示表头
            type: Boolean,
            default: true
        },
        loading: {
            // 预加载
            type: Boolean,
            default: false
        },
        selectFn: {
            // 全选禁用方法
            type: Function,
            default: () => {
                return true;
            }
        },
        tableData: {
            // 表格数据
            type: Array,
            default: () => {
                return [];
            }
        },
        tableColumns: {
            // 表头数据
            type: Array,
            default: () => {
                return [];
            }
        },
        selection: {
            // 全选
            type: Boolean,
            default: false
        },
        selectionFixed: {
            // 全选是否固定
            type: Boolean,
            default: false
        },
        page: {
            // 当前页
            type: Number || String,
            default: () => {
                return 1;
            }
        },
        rows: {
            // 当前页展示数
            type: Number || String,
            default: () => {
                return "2";
            }
        },
        total: {
            // 总数
            type: Number || String,
            default: () => {
                return "";
            }
        },
        tableHeight: {
            // 高度
            type: String,
            default: () => null
        },
        rowheight: {
            // 行高
            type: String,
            default: () => null
        },
        minHeight: {
            type: String,
            default: () => ""
        },
        noDataShow: {
            // table中间无数据展示
            type: String,
            default: () => "没有满足条件的记录"
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.table.doLayout();
            this.$forceUpdate();
        });
    },
    methods: {
        selectableFn(row, index) {
            console.log(row);
        },
        // 切换当前一页展示多少条
        handleSizeChange(val) {
            this.$emit("handleChange", { pageSize: val });
        },
        // 翻页
        handleCurrentChange(val) {
            // console.log(this.$attrs, '31231')
            this.$emit("handleChange", { pageNum: val });
        },
        // 多选
        handleSelectionChange(val) {
            this.$emit("handleSelectionChange", val);
        },
        tableRowClassName(row, rowIndex) {
            // 有空优化
            if (this.$parent.tableRowColor) {
                return this.$parent.tableRowColor(row, rowIndex);
            }
        },
        // 按钮点击事件
        // methods方法名 row当前点击列数据 index当前点击的index
        handleButton(methods, row, index) {
            this.$emit("clickButton", {
                methods: methods,
                row: row,
                index: index
            });
        }
    }
};
</script>

<style scoped lang="scss">
.targetTable {
    width: 100%;
    height: 100%;
    .el-input-number {
        width: 70px;
    }
}

.noCart {
    position: relative;
    // top: -20px;
}

.el-loading-mask {
    background-color: rgba(255, 255, 255, 0.98);
}
</style>
